import React from "react";
import { Page, useNavigate } from "zmp-ui";
import { useRecoilValue } from "recoil";
import { useI18n } from "../i18n";
import { userState } from "../state";
import { useUserCenter } from "../hooks/useUserCenter";
import Navbar from "../components/navbar";

const ProfilePage: React.FunctionComponent = () => {
  const { t } = useI18n();
  const navigate = useNavigate();
  const user = useRecoilValue(userState);
  const { userCenterData, loading, error, refreshUserCenterData } = useUserCenter();

  // 如果用户中心数据为空且没有在加载中，尝试刷新
  React.useEffect(() => {
    if (!userCenterData && !loading && !error) {
      refreshUserCenterData();
    }
  }, [userCenterData, loading, error, refreshUserCenterData]);

  const handlePhoneClick = () => {
    // 跳转到手机号编辑页面
    console.log("编辑手机号");
  };

  const handleEmailClick = () => {
    // 跳转到邮箱编辑页面
    console.log("编辑邮箱");
  };

  // const handleReceiptEmailClick = () => {
  //   // 跳转到收据邮箱编辑页面
  //   console.log("编辑收据邮箱");
  // };


  const ProfileItem: React.FC<{
    title: string;
    value: string;
    onClick: () => void;
    showArrow?: boolean;
  }> = ({ title, value, onClick, showArrow = true }) => (
    <div
      onClick={onClick}
      style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        padding: '16px 20px',
        backgroundColor: '#fff',
        cursor: 'pointer',
        transition: 'background-color 0.2s'
      }}
      onMouseEnter={(e) => {
        e.currentTarget.style.backgroundColor = '#f5f5f5';
      }}
      onMouseLeave={(e) => {
        e.currentTarget.style.backgroundColor = '#fff';
      }}
    >
      <div>
        <div style={{
          fontSize: 14,
          fontWeight: 'bold',
          color: '#333',
          marginBottom: 4
        }}>
          {title}
        </div>
        <div style={{
          fontSize: 14,
          color: '#66666B'
        }}>
          {value}
        </div>
      </div>
      {showArrow && (
        <span style={{
          fontSize: 16,
          color: '#999'
        }}>
          ›
        </span>
      )}
    </div>
  );

  return (
    <Page className="page" style={{ padding: 0, background: '#F5F5F7' }}>
      {/* 顶部导航栏 */}
      <Navbar title={t("profile.title")} />

      {/* 内容区域 */}
      <div style={{ paddingTop: 10 }}>
        {/* 用户ID */}
        <div style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          padding: '16px 20px',
          backgroundColor: '#fff'
        }}>
          <div style={{
            fontSize: 14,
            fontWeight: 'bold',
            color: '#333'
          }}>
            {t("profile.userId")}
          </div>
          <div style={{
            fontSize: 14,
            color: '#333'
          }}>
            {userCenterData?.user?.id ? `U${userCenterData.user.id.toString().padStart(8, '0')}` : 'U00000001'}
          </div>
        </div>

        {/* 分隔线 */}
        <div style={{ height: 4, backgroundColor: '#F0F0F2' }} />

        {/* 手机号码 */}
        <ProfileItem
          title={t("profile.phoneNumber")}
          value={userCenterData?.user?.mobile ? `+${userCenterData.user.countryCode} ${userCenterData.user.mobile}` : '未设置'}
          onClick={handlePhoneClick}
        />

        {/* 分隔线 */}
        <div style={{ height: 4, backgroundColor: '#F0F0F2' }} />

        {/* 邮箱 */}
        <ProfileItem
          title={t("profile.email")}
          value={userCenterData?.user?.email || '未设置'}
          onClick={handleEmailClick}
        />

        {/* 分隔线 */}
        <div style={{ height: 4, backgroundColor: '#F0F0F2' }} />

        {/* 接收收据邮箱 */}
        {/* <ProfileItem
          title={t("profile.receiptEmail")}
          value={user.userInfo?.receiptEmail || 'xxx@xxx.com'}
          onClick={handleReceiptEmailClick}
        /> */}

        {/* 分隔线 */}
        {/* <div style={{ height: 4, backgroundColor: '#F0F0F2' }} /> */}

        {/* Google登录信息 */}
        {/* <div style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          padding: '16px 20px',
          backgroundColor: '#fff'
        }}>
          <div>
            <div style={{
              fontSize: 14,
              fontWeight: 'bold',
              color: '#333',
              marginBottom: 4
            }}>
              {t("profile.googleLogin")}
            </div>
            <div style={{
              fontSize: 14,
              color: '#66666B'
            }}>
              {t("profile.authorized")}
            </div>
          </div>
        </div> */}

      </div>
    </Page>
  );
};

export default ProfilePage;
